<template>
  <el-breadcrumb separator="/" class="breadcrumb">
    <el-breadcrumb-item v-for="item in levellist" :key="item.path">
      <router-link :to="item.path">{{ item.name }}</router-link>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      levellist: null,
    };
  },
  methods: {
    getBreadcrumb() {
      console.log("路由",this.$route);
      let matched = this.$route.matched.filter((item) => {
        item.name;
      });
      const first = matched[0];
      if (first && first.name !== "首页") {
        // matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
      }
      this.levellist = matched;
      // console.log("面包屑的值",this.levellist);
    },
  },
  mounted() {
    this.getBreadcrumb();
  },
  watch: {
    $route(to, from) {
      this.getBreadcrumb();
    },
  },
};
</script>

<style scoped lang="scss">
.breadcrumb {
  padding: 10px;
}
</style>
